<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const form = document.querySelector("form");
        const passwordInput = document.querySelector(
            "input[name='password']"); const code = document.querySelector("a.code"); const queren = document.querySelector(".icon-queren");
        const numberOnlyRegex = /^\d+$/;
        const usernameRegex = /^[a-zA-Z0-9]+$/;
        const passwordRegex = /^[a-zA-Z0-9!@#$%^&*()]+$/;
        queren.addEventListener("click", () => { queren.classList.toggle("icon-queren2"); });
        form.addEventListener("submit", (e) => { if (!queren.classList.contains("icon-queren2")) { e.preventDefault(); alert("请先勾选协议"); } });
        form.addEventListener("change", (e) => { if (e.target.nodeName === "INPUT") { switch (e.target.name) { case "username": if (!checkTextLength(e.target, 0, 20)) return; checkTextByRegex(e.target, usernameRegex, "用户名仅支持英文和数字"); break; case "phone": if (!checkTextLength(e.target, 0, 11)) return; checkTextByRegex(e.target, numberOnlyRegex, "请输入正确的电话号码"); break; case "code": if (!checkTextLength(e.target, 0, 6)) return; checkTextByRegex(e.target, numberOnlyRegex, "请输入正确的验证码"); break; case "password": if (!checkTextLength(e.target, 6, 20)) return; checkTextByRegex(e.target, passwordRegex, "密码由字母、数字和符号组合!"); break; case "confirm": if (e.target.value !== passwordInput.value) { e.target.nextElementSibling.innerHTML = "两次密码不一致!"; } else { e.target.nextElementSibling.innerHTML = ""; } break; } } });
        let countdown = 5; let codeInterval; code.addEventListener("click", () => { code.style.pointerEvents = "none"; sendCode(); codeInterval = setInterval(sendCode, 1000); }); function sendCode() { if (countdown === 0) { code.innerHTML = `发送验证码`; countdown = 5; code.style.pointerEvents = "auto"; clearInterval(codeInterval); return; } code.innerHTML = `再次发送(${countdown})`; countdown--; } function checkTextLength(target, minL, maxL) { if (target.value.trim().length >= minL && target.value.trim().length <= maxL) { target.nextElementSibling.innerHTML = ""; return true; } else { target.nextElementSibling.innerHTML = minL > 0 ? `内容长度在${minL}-${maxL}之间!` : `内容长度最大不超过${maxL}`; return false; } } function checkTextByRegex(target, regex, warn) { if (!regex.test(target.value)) { target.nextElementSibling.innerHTML = warn; } else { target.nextElementSibling.innerHTML = ""; } }        
    </script>
</body>

</html>